import React, { useState, useEffect } from 'react';

import { Form, Input, Modal, Select, Upload, message, Radio } from 'antd';
import { FormValueType, TreeNode } from '../data.d';
import { queryDeviceAttr } from '@/services/deviceattr';
import { queryDevice } from '@/services/device';

const { Option } = Select;
const FormItem = Form.Item;

export interface UpdateFormProps {
  typelist: API.DictItem[];
  levellist: API.DictItem[];
  onCancel: () => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: FormValueType;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [formVals, setFormVals] = useState<FormValueType>(props.values);

  const [deviceType, setDeviceType] = useState([]);
  const [attrType, setAttrType] = useState([]);

  const [form] = Form.useForm();
  const { updateModalVisible, onSubmit: handleUpdate, onCancel, typelist, values,levellist } = props;
  const [alarmTypeList, setAlarmTypeList] = useState<API.DictItem[]>(typelist);
  

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    handleUpdate(fieldsValue);
  };

  const getAlarmType = (list: API.DictItem[]) => {
    if (!list || list.length < 1) {
      return (
        <Option key={''} value={''}>
          没有找到选项
        </Option>
      );
    }
    return list.map((item) => (
      <Option key={item.dictCode} value={item.dictCode}>
        {item.dictValue}
      </Option>
    ))
  }

  const getAlarmLevel = (list: API.DictItem[]) => {
    if (!list || list.length < 1) {
      return (
        <Option key={''} value={''}>
          没有找到选项
        </Option>
      );
    }
    return list.map((item) => (
      <Option key={item.dictCode} value={item.dictCode}>
        {item.dictValue}
      </Option>
    ))
  }

  const getDeviceType = (list) => {
    if (!list || list.length < 1) {
      return (
        <Option key={''} value={''}>
          没有找到选项
        </Option>
      );
    }
    return list.map((item) => (
      <Option key={item.deviceId} value={item.deviceId}>
        {item.deviceName}
      </Option>
    ))
  }

  const getAttrType = (list) => {
    if (!list || list.length < 1) {
      return (
        <Option key={''} value={''}>
          没有找到选项
        </Option>
      );
    }
    return list.map((item) => (
      <Option key={item.attrId} value={item.attrId}>
        {item.browseName}
      </Option>
    ))
  }

  useEffect(() => {
    const setSelectData = async () => {
     
      // 获取变量名称
      const attrType = await queryDeviceAttr({
        current: 1,
        pageSize: 1000
      });
     
      setAttrType(attrType.data)
    };
    setSelectData();
  }, []);


  const validatorValue = async (_: any, value: string) => {
    const promise = Promise;
    // if(value==null||value==""){
    //   return promise.reject("数值不能为空");
    // }
    if(Number.parseInt(value)>999999999999){
      return promise.reject("值不能超过99999999999");
    }
    console.log(value)
    console.log(Number(value))
    console.log(value==null)
    if(_.field=='maxValue'&&value!=null&&form.getFieldValue('minValue')!=null&&Number(value)<Number(form.getFieldValue('minValue'))){
      return promise.reject("最大值不能小于最小值");
    }
    if(_.field=='minValue'&&value!=null&&form.getFieldValue('maxValue')!=null&&Number(value)>Number(form.getFieldValue('maxValue'))){
      return promise.reject("最小值不能大于最大值");
    }
  
    return promise.resolve();
  };
console.log(formVals)
  return (
    <Modal
      width={640}
      maskClosable={false}
      destroyOnClose
      title="编辑报警规则"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={formVals}
      >
         <FormItem
          label="报警级别"
          name="alarmLevel"
        >
          <Select placeholder="请选择">
            {getAlarmLevel(levellist)}
          </Select>
          {/* <Input placeholder="请输入" autoComplete='off' /> */}
        </FormItem>
        <FormItem
          label="报警类别"
          name="alarmType"
        >
          <Select placeholder="请选择">
            {getAlarmType(typelist)}
          </Select>
        </FormItem>
        <FormItem
          label="报警规则id"
          name="id"
          hidden={true}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="报警规则名称"
          name="alarmName"
          rules={[{ required: true, message: '请输入至少二个字符！', min: 2 }]}
        >
          <Input placeholder="请输入" autoComplete='off'/>
        </FormItem>
        <FormItem
          label="设备id"
          name="deviceId"
          hidden={true}
        >
        </FormItem>
        <FormItem
          label="设备名称"
          name="deviceName"
        >
          <Input disabled/>
        </FormItem>
        <FormItem
          label="变量名称"
          name="attrId"
        >
          <Select placeholder="请选择">
            {getAttrType(attrType)}
          </Select>
        </FormItem>
        <FormItem
          label="最小值"
          name="minValue"
          rules={[{ required: true, message: '请输入最小值' },{validator: validatorValue}]}
        >
          <Input type='number' placeholder="请输入"  autoComplete='off' />
        </FormItem>
       
        <FormItem
          label="最大值"
          name="maxValue"
          rules={[{validator: validatorValue}]}
        >
          <Input type='number' placeholder="请输入"  autoComplete='off' />
        </FormItem>
       
        <FormItem
          label="启用状态"
          name="useState"
        >
          <Radio.Group>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="处理建议"
          name="handleOpinions"
        >
          <Input.TextArea rows={3} placeholder="请输入" />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default UpdateForm;
